<template>
  <div class="dst-add-card-wrap dstform--demo-wrap"
       v-loading="loading">
    <div :class="[modeType != 'detail' ? 'dst-add-overflow-y-box' : '']">
      <el-card>
        <div slot="header">
          <span class="dst-card-title">基础信息</span>
        </div>
        <dstForm ref="dataArrBase"
                 :data-arr="dataArrBase"
                 v-model="ruleForm"
                 :mode-type="modeType"
                 label-width="120px">
        </dstForm>
      </el-card>
      <div class="dst-add-bottom-btn-box"
           v-if="modeType != 'detail'">
        <el-button type="success"
                   v-debounceClick="1500"
                   @click="submitFormDstForm">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { dataArrBase, dataArrfile, dataArrDialog } from "./functions/data.js";
import { createCar, updateCar, getDetail } from '@/portal-common/commonPage/template/detailAndAddCard/addEditDetail/functions/mock.js'
export default {
  name: "detailAndAddCardAddEditDetail",
  components: {},
  data() {
    return {
      modeType: "add",
      loading: false,
      ruleForm: {},
      selectData: {
        someSelectData: []
      }
    };
  },
  computed: {
    dataArrBase: dataArrBase.bind(this),
    dataArrfile: dataArrfile.bind(this),
    dataArrDialog: dataArrDialog.bind(this),
  },
  mounted() {
    this.init();
    this.initTitle();
    if (this.$route.query.id) {
      this.getDetail();
    }
  },
  methods: {
    init() {
      // Promise.all([someDictype()]).then((res) => {
      //   this.selectData.someSelectData = res[0].data
      // });
    },
    initTitle() {
      let title = {
        add: "新建xxxxx",
        edit: "编辑xxxxx",
        detail: "xxxxx详情",
      };
      this.modeType = this.$route.query.type || "add";
      this.$route.meta.title = title[this.modeType];
      this.$store.dispatch("editVisitedViews", this.$route);
    },
    submitFormDstForm() {
      let valid1 = false;
      let valid2 = false;
      this.$refs.dataArrBase.formValidate(async (valid) => {
        valid1 = valid;
      });
      this.$refs.dataArrBase.formValidate(async (valid) => {
        valid2 = valid;
      });
    
      if (valid1 && valid2) {
        const params = {
          ...this.ruleForm,
        };
        let fn = createCar;
        let text = "新增";
        if (this.$route.query.type == "edit") {
          fn = updateCar;
          text = "编辑";
          params.id = this.$route.query.id;
        }
        this.loading = true;
        fn(params)
          .then((res) => {
            this.$message.success(`${text}成功`);
            this.$store
              .dispatch("delVisitedViews", this.$route)
              .then(() => {
                this.$router.push({
                  path: "/cccc/cxxxxx/xxxxx",
                });
              });
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        this.$message.error("请检查表单");
      }
    },
    getDetail() {
      getDetail({
        id: this.$route.query.id,
      }).then((res) => {
        this.ruleForm = res.data;
      });
    },
  },
};
</script>
<style lang="scss"></style>
